<style>
  .modify-email-box {
    width: 400px;
  }
</style>

<div class="container_wrapper account_default_default" id="account_default">

  <h1 class="title">{{ lang.account.default.account }}</h1>

  <div class="describe-box">
    <div class="describe-box-title">{{ lang.account.default.welcome }},{{ customerInfo.first_name }} {{ customerInfo.last_name }}</div>
    <div class="describe-box-label">{{ customer.email }}</div>
  </div>
  {% if adminInfo and storeConfig.oem_service_customer == '1' %}
    <div class="order_linked_servie">
      <div class="order_linked_servie_wrapper">
        <div class="service_left">
          {% if adminInfo.avatar == '' %}
            <span class="no_avatar">
              {% include 'icon_order_linked_service' %}
            </span>
          {% else %}
            <span>
              <img src="{{adminInfo.avatar}}" />
            </span>
          {% endif %}
        </div>
        <div class="service_right">
          <h4 class="service_name">{{ adminInfo.name }} ({{ lang.checkout.link_services }})</h4>
          <div class="service_remark">{{ adminInfo.contact_remark }}</div>
        </div>
      </div>
    </div>
  {% endif %}
  <div class="account_default_link">
    <div class="account_default_link_wapper plugin-account_default-box">
      <a href="{{routes.account_orders_url}}" class="secondary_btn">{{ lang.account.default.orders | upcase }}</a>
      <a href="{{routes.account_addresses_url}}" class="secondary_btn">{{ lang.account.default.address | upcase }}</a>
      {% if storeConfig.wishlist_enable == '1' %}
        <a href="/account/wishlist" class="secondary_btn">{{ lang.account.default.my_wishlist | upcase }}</a>
      {% endif %}
      {% if customer.open_points == '1' %}
        <a href="/account/membercenter" class="secondary_btn">{{ lang.customer.customer_points }}</a>
      {% endif %}
      <a href="/account/profilechange" class="secondary_btn">{{ lang.account.default.profile | upcase }}</a>
      <a href="{{routes.account_changepassword_url}}" class="secondary_btn">{{ lang.account.default.change_password | upcase }}</a>
      <a class="secondary_btn" id='out'>{{ lang.account.default.sing_out | upcase }}</a>
    </div>
  </div>


  <div class="plugin-container-footer"></div>
</div>

<script type="text/html" id="modify-email-temp">
    <div class="df-bg-white df-w-10/12 modify-email-box df-p-5">
        <div class="mo-form-item df-text-center df-text-lg df-font-bold">Modify Email</div>
        <div class="mo-form-item ">
            <div class="mo-form-item-value">
                <input class="mo-form-input" placeholder=""  name='email' value='{{customer.email}}' type="text" />
            </div>
        </div>
        <div class="mo-form-item " >
            <label class="checkbox_label mo-checkbox" style="text-align: left;padding: 0;" for="sub_checkbox">
                <input class=" mo-checkbox_input order_checkbox insurance_checkbox" type="checkbox" name="update_order_email" value="1" id="sub_checkbox" />
                <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox%}</span>{{lang.account.create.sub}}
            </label>
        </div>
        <div class="mo-form-item-value">
            <a href="javascript:;" id='confirm' class="main_btn form_btn">{{lang.general.save }}</a>
        </div>
    </div>
</script>

<script type="text/javascript">
    (function () {
        $("#out").click(function () {
            const self = this;
            moi.confirm({
                title: `{{lang.account.default.sing_out_tips}}`,
                ok: function () {
                    moi.href('/account/logout');
                }
            })

        });
        $("#modifyEmail").click(function(){
            var modifyEmail = moi.popup({ customClass: "popup-quick-body" });
            modifyEmail.addContent($("#modify-email-temp").html());
            modifyEmail.temp.find("#confirm").click(function(){})
        })
    })();
</script>